<template>
  <div class="all-content">
    <BreadList :breadList="breadList"></BreadList>
    <div class="manage-content"
      v-loading="listLoading"
      element-loading-text="加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.5)">
      <div class="search-content">
        <el-input 
          class="search-input" 
          v-model="searchParams" 
          clearable 
          placeholder="请输入关键词搜索"
          maxlength="50"
          @keyup.enter.native="getTableList(1, true)"
          >
          <i
            class="el-icon-search el-input__icon"
            slot="suffix">
          </i>
        </el-input>
        <el-button class="search-btn" @click="downLoad">下载</el-button>
        <el-button class="search-btn" type="primary" @click="pushClue">推送</el-button>
        <el-button class="search-btn" type="primary" @click="getTableList(1, true)">搜索</el-button>
      </div>
      <div class="table-content">
        <div class="list" v-show="tableData.length > 0">
          <el-table
            :data="tableData"
            border
            stripe
            style="width: 100%;height: 100%"
            height="100%">
            <el-table-column
              label="序号"
              type="index"
              width="68">
              <template slot-scope="scope">
                <span>{{(tablePageData.currentPage - 1) * tablePageData.pageSize + scope.$index + 1}}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="supervisionObject"
              label="监督对象"
              min-width="150">
              <template slot-scope="scope">
                <!-- <el-tooltip :content="scope.row.supervisionObject" placement="top"> -->
                  <span class="desc-style" v-html="scope.row.supervisionObject"></span>
                <!-- </el-tooltip> -->
              </template>
            </el-table-column>
            <el-table-column
              label="监督对象名称"
              min-width="150">
              <template slot-scope="scope">
                <!-- <el-tooltip :content="scope.row.supervisionObjectName" placement="top"> -->
                  <span class="desc-style" v-html="scope.row.supervisionObjectName"></span>
                <!-- </el-tooltip> -->
              </template>
            </el-table-column>
            <el-table-column
              label="监督点"
              min-width="150">
              <template slot-scope="scope">
                <!-- <el-tooltip :content="scope.row.supervisionPointName" placement="top"> -->
                  <span class="desc-style" v-html="scope.row.supervisionPointName"></span>
                <!-- </el-tooltip> -->
              </template>
            </el-table-column>
            <el-table-column
              label="监督点中文说明"
              min-width="150">
              <template slot-scope="scope">
                <!-- <el-tooltip :content="scope.row.supervisionPointContent" placement="top"> -->
                  <span class="desc-style" v-html="scope.row.supervisionPointContent"></span>
                <!-- </el-tooltip> -->
              </template>
            </el-table-column>
            <el-table-column
              label="监督点列表"
              width="123">
              <template slot-scope="scope">
                <span class="operate-item" @click="checkSupervise(scope.row)"><span class="icon icon-look"></span>查看</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="weight"
              :formatter="weightFormat"
              label="权重"
              width="145">
            </el-table-column>
            <el-table-column
              label="操作"
              width="247">
              <template slot-scope="scope">
                <span class="operate-item" @click="detailShow(scope.row)"><span class="icon icon-detail"></span>详情</span>
                <span v-if="!scope.row.evaluationResult" class="operate-item" @click="itemFeedback(scope.row)"><span class="icon icon-feedback"></span>成案反馈</span>
                <span v-else class="operate-item disabled"><span class="icon icon-feedback"></span>{{ feedbackFormat(scope.row.evaluationResult) }}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="page-box" v-show="tableData.length > 0">
          <el-pagination
            class="table-page"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="tablePageData.currentPage"
            :page-sizes="tablePageData.pageSizes"
            :page-size="tablePageData.pageSize"
            background
            layout="total, sizes, slot, prev, pager, next"
            :total="tablePageData.total">
            <span class="page-item first" @click="handleCurrentChange(1)">首页</span>
          </el-pagination>
          <el-pagination
            class="table-page"
            @current-change="handleCurrentChange"
            :current-page="tablePageData.currentPage"
            :page-sizes="tablePageData.pageSizes"
            :page-size="tablePageData.pageSize"
            background
            layout="slot"
            :total="tablePageData.total">
            <span class="page-item" @click="handleCurrentChange(Math.ceil(tablePageData.total/tablePageData.pageSize))">末页</span>
            <span class="page-jumper">跳至<el-input class="page-num" v-model="tablePageData.inputNum" @input.native="tablePageData.inputNum = JSON.stringify(tablePageData.inputNum).replace(/[^0-9]/g,'')" @blur="handleCurrentChange(tablePageData.inputNum)" @keyup.enter.native="handleCurrentChange(tablePageData.inputNum)"></el-input>页</span>
          </el-pagination>
        </div>
        <Empty v-show="tableData.length === 0" imgHeight="42%" />
      </div>
      <el-dialog
        title="监督点查看"
        v-if="checkModelShow"
        :visible.sync="checkModelShow"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        :append-to-body="false"
        :destroy-on-close="true"
        width="1008px">
          <SupervisionPointList 
            ref="supervisionPointList"  
            :id="activeClue" 
            :taskLogId="taskLogId"
            :supervisionPointId="supervisionPointId"
            @pushClue="pushClue"
            :activeExportName="activeExportName"
            @modelClose="checkModelShow = false"
            @canDownLoad="data => canDownLoad = data"
            ></SupervisionPointList>
          <span slot="footer" class="dialog-footer">
            <el-button :disabled="!canDownLoad" type="primary" @click="superviseDown">下载</el-button>
            <el-button @click="checkModelShow = false">关闭</el-button>
          </span>
      </el-dialog>
      <el-dialog
        title="详情"
        v-if="detailModelShow"
        :visible.sync="detailModelShow"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        :append-to-body="false"
        :destroy-on-close="true"
        width="600px"
        custom-class="detail-dialog"
        >
          <DetailInfo 
            ref="detailInfo" 
            :id="activeClue" 
            :activeExportName="activeExportName"
            @detailModelClose="detailModelShow = false"
            @canDownLoad="data => canDownLoad = data"></DetailInfo>
          <span slot="footer" class="dialog-footer">
            <el-button :disabled="!canDownLoad" type="primary" @click="detailsDown">下载</el-button>
            <el-button type="primary" @click="detailsPush">推送</el-button>
          </span>
      </el-dialog>
      <el-dialog
        title="成案反馈"
        v-if="feedbackModelShow"
        :visible.sync="feedbackModelShow"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        :append-to-body="false"
        :destroy-on-close="true"
        width="480px"
        custom-class="detail-dialog"
        >
          <Feedback ref="feedback" @feedbackDown="feedbackDown"></Feedback>
          <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="feedbackSure">确定</el-button>
            <el-button @click="feedbackModelShow = false">取消</el-button>
          </span>
      </el-dialog>
      <el-dialog
        title="推送"
        v-if="pushModelShow"
        :visible.sync="pushModelShow"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        :append-to-body="false"
        :destroy-on-close="true"
        width="960px">
          <PushList ref="pushList" @pushModelSure="pushModelSure"></PushList>
          <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="pushModelSureBtn">推送</el-button>
            <el-button @click="pushModelShow = false">关闭</el-button>
          </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
  import Empty from '../../components/empty';
  import SupervisionPointList from '../../components/supervisionPointList';
  import PushList from '../../components/pushList';
  import Feedback from '../../components/feedback';
  import DetailInfo from '../../components/detailInfo';
  import { ClueResource } from '../../axios/index';
  import { mapGetters } from 'vuex';
  import BreadList from '../../components/breadList';
  export default {
    name: 'CluesDetails',
    components: {
      Empty,
      SupervisionPointList,
      PushList,
      Feedback,
      DetailInfo,
      BreadList
    },
    data() {
      return {
        // 搜索条件
        searchParams: '',
        oldSearchParams: '',
        // 表格相关
        listLoading: false,
        tableData: [],
        tablePageData: {
          currentPage: 1,
          pageSize: 10,
          total: 0,
          pageSizes: [10, 20, 50],
          inputNum: 1
        },
        // 监督点查看弹框
        checkModelShow: false,
        // 详情下载
        detailModelShow: false,
        // 成案反馈
        feedbackModelShow: false,
        // 推送
        pushModelShow: false,
        // 当前选中线索
        activeClue: null,
        activeExportName: '',
        taskLogId: null,
        // 当前选中线索监督点Id
        supervisionPointId: '',
        // 推送类型（1：线索总览推送；2：单个线索推送；3：线索集推送；）
        pushType: '',
        // 控制弹框的下载
        canDownLoad: true,
        // 面包屑列表
        breadList: [
          {
            modelName: 'clueManagelist',
            name: '线索管理'
          },
          {
            modelName: 'ClueResultList',
            name: '线索结果列表'
          },
          {
            modelName: 'CluesList',
            name: '线索集列表'
          },
          {
            modelName: 'CluesDetails',
            name: '线索集'
          }
        ]
      }
    },
    mounted() {
      this.getTableList();
    },
    methods: {
      // 权重格式化
      weightFormat(row) {
        switch(row.weight){
          case 1:
            return '低'
          case 2:
            return '中'
          case 3:
            return '高'
          default:
            return '未研判'
        }
      },
      // 成案反馈格式化
      feedbackFormat(evaluationResult) {
        switch(evaluationResult){
          case 1:
            return '成案'
          case 2:
            return '调查'
          case 3:
            return '放弃'
          default:
            return ''
        }
      },
      // 获取列表数据
      getTableList(page, record) {
        if(page) {
          this.tablePageData.currentPage = page;
          this.tablePageData.inputNum = page;
        }
        if(record) {
          this.oldSearchParams = JSON.parse(JSON.stringify(this.searchParams));
        }
        let returnTrue = false;
        setTimeout(() => {
          if(!returnTrue) {
            this.listLoading = true;
          }
        }, 100)
        ClueResource
        .collectionDetail({
          rybm: this.userInfo.rybm,
          collectionId: this.activeItem.collectionId,
          keyword: this.searchParams,
          pageNo: this.tablePageData.currentPage,
          pageSize: this.tablePageData.pageSize
        })
        .then(res => {
          returnTrue = true;
          this.listLoading = false;
          if(res && res.data) {
            this.tablePageData.total = parseInt(res.data.total);
            if(res.data.records) {
              this.tableData = res.data.records.map(item => {
                if(this.oldSearchParams.length > 0) {
                  let needHight = ['supervisionObject', 'supervisionObjectName', 'supervisionPointName', 'supervisionPointContent']
                  needHight.forEach(hItem => {
                    let exp = new RegExp(this.oldSearchParams, "g");
                    item[hItem] = item[hItem].replace(exp, '<span class="hight-light">' + this.oldSearchParams + '</span>')
                  })
                }
                return item
              });
            }
          }
        })
        .catch(() => {  
          returnTrue = true;
          this.listLoading = false;
        })
      },
      // 改变每页size
      handleSizeChange(val) {
        this.tablePageData.pageSize = val;
        this.searchParams = JSON.parse(JSON.stringify(this.oldSearchParams));
        this.getTableList(1)
      },
      // 切页
      handleCurrentChange(val) {
        val = parseInt(val);
        if(!val || val <= 0) {
          val = 1;
        }
        else if(val > Math.ceil(this.tablePageData.total / this.tablePageData.pageSize)) {
          val = Math.ceil(this.tablePageData.total / this.tablePageData.pageSize);
        }
        this.tablePageData.inputNum = val;
        if(val === this.tablePageData.currentPage) {
          return
        }
        this.tablePageData.currentPage = val;
        this.searchParams = JSON.parse(JSON.stringify(this.oldSearchParams));
        this.getTableList();
      },
      // 查看监督点列表
      checkSupervise(item) {
        this.activeClue = item.taskId;
        this.taskLogId = item.taskLogId;
        this.supervisionPointId = item.supervisionPointId
        this.checkModelShow = true;
        this.activeExportName = item.exceptionLogic + item.supervisionPointContent;
        this.canDownLoad = true;
      },
      // 监督点列表下载
      superviseDown() {
        // this.checkModelShow = false;
        this.$refs.supervisionPointList.downLoad();
      },
      // 查看详情
      detailShow(item) {
        this.activeClue = item.id;
        this.activeExportName = item.supervisionObjectName + item.exceptionLogic + item.supervisionPointContent;
        this.detailModelShow = true;
        this.canDownLoad = true;
      },
      // 详情下载
      detailsDown() {
        // this.detailModelShow = false;
        this.$refs.detailInfo.downLoad();
      },
      // 详情推送
      detailsPush() {
        this.pushType = 2
        this.detailModelShow = false;
        this.pushModelShow = true;
      },
      // 成案反馈确认
      feedbackDown(data) {
        let params = ''
        if (data.evaluationResult === 1) {
          params = {
            id: this.activeClue,
            evaluationResult: data.evaluationResult,
            ajmc: data.ajmc,
            bmsah: data.bmsah,
            rybm: this.userInfo.rybm
          }
        } else if (data.evaluationResult === 2) {
          params = {
            id: this.activeClue,
            evaluationResult: data.evaluationResult,
            rybm: this.userInfo.rybm
          }
        } else if (data.evaluationResult === 3) {
          params = {
            id: this.activeClue,
            evaluationResult: data.evaluationResult,
            info: data.info,
            rybm: this.userInfo.rybm
          }
        }
        ClueResource
        .feedBackForClue(params)
        .then(res => {
          this.$message.success('成案反馈成功')
          this.getTableList();
          this.feedbackModelShow = false;
        })
      },
      feedbackSure() {
        this.$refs.feedback.feedbackDown();
      },
      // 成案反馈
      itemFeedback(item) {
        this.activeClue = item.id
        this.feedbackModelShow = true;
      },
      // 推送
      pushClue(superviseModel) {
        if(superviseModel) {
          this.checkModelShow = false;
        }
        this.pushType = 3
        this.pushModelShow = true;
      },
      // 推送确认
      pushModelSure(data) {
        let params = {}
        if (this.pushType === 3) {
          params = {
            receiverList: data.list,
            pusherLoginId: this.userInfo.rybm,
            pusherLoginName: this.userInfo.dlbm,
            collectionId: this.activeItem.collectionId,
            cluePushPlatform: data.platform
          }
        } else if (this.pushType === 2) {
          params = {
            receiverList: data.list,
            pusherLoginId: this.userInfo.rybm,
            pusherLoginName: this.userInfo.dlbm,
            detailId: this.activeClue,
            cluePushPlatform: data.platform
          }
        }
        this.$refs.pushList.listLoading = true;
        ClueResource
        .cluePush(params)
        .then(res => {
          this.$refs.pushList.listLoading = false;
          this.$message.success('推送成功')
          this.pushModelShow = false;
        })
        .catch(() => {
          this.$refs.pushList.listLoading = false;
        })
      },
      pushModelSureBtn() {
        this.$refs.pushList.pushSure();
      },
      // 下载
      downLoad() {
        this.listLoading = true;
        ClueResource
        .exportCollection({
          keyword: this.searchParams,
          collectionId: this.activeItem.collectionId
        })
        .then(res => {
          this.listLoading = false;
          let url = window.URL.createObjectURL(res);
          let a = document.createElement('a');
          a.style.display = 'none';
          a.href = url;
          a.download = `${this.activeItem.collectionName}.xlsx`;
          document.body.appendChild(a);
          a.click();
          document.body.removeChild(a);
          window.URL.revokeObjectURL(url);
        })
        .catch(() => {
          this.listLoading = false;
        })
      }
    },
    computed: {
      ...mapGetters({
        activeItem: "getActiveItem",
        userInfo: "getUserInfo"
      })
    }
  }
</script>

<style scoped lang="scss">
  .all-content {
    width: 100%;
    height: 100%;
  }
  .manage-content {
    width: 100%;
    height: calc(100% - 32px);
    padding: 0 24px;
    background-color: #fff;
  }
</style>
